<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .banner {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        .banner_ul {
            position: relative;
        }
        
        .banner_ul li {
            float: left;
        }
        
        .banner_ul li img {
            display: block;
            width: 100%;
        }
        
        .banner_point {
            width: 130px;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 1px;
            transform: translate(-50%, 0px);
        }
        
        .active {
            background-color: #fff;
        }
        
        .banner_point>li {
            width: 6px;
            height: 6px;
            border: 1px solid #fff;
            border-radius: 50%;
            float: left;
            margin-right: 10px;
        }
    </style>
    <script src="./reviews/js/zep.js"></script>
    <script src="./reviews/js/selector.js"></script>
    <script src="./reviews/js/fx.js"></script>
    <script src="./reviews/js/touch.min.js"></script>


</head>

<body>
    <!-- 轮播图banner部分 -->
    <div class="banner">
        <ul class="banner_ul">
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test1.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test2.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test3.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test4.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test5.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test1.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test1.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="./reviews/img/test1.png" alt="">
                </a>
            </li>
        </ul>
        <!-- 点标记 -->
        <ul class="banner_point">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
<script>
    $(function() {
        //获取盒子banner
        var banner = $(".banner");
        //获取第一个ul 装图片的
        var imgBox = banner.find("ul:first-of-type");
        //获取banner的宽度
        var bannerWidth = banner.width();
        //获取点标记
        var indatior = banner.find("ul:last-of-type").find("li");
        console.log(indatior);
        //获取ul中第一张图片
        var first = imgBox.find("li:first-of-type");
        //获取ul最后一张图片
        var last = imgBox.find("li:last-of-type");
        //将第一张图片克隆到最后一张
        imgBox.append(first.clone());
        //将最后一张图片放入第一张的前面
        last.clone().insertBefore(first);
        //获取所有图片li
        var list = imgBox.find("li");
        // console.log(list);\
        //将图片的长度length赋值给count
        var count = list.length;
        //ul的总长度就为banner盒子的宽度*总共li的个数
        imgBox.width(count * bannerWidth);
        //设置每个li的宽度
        list.width(bannerWidth);
        //设置默认显示第一张图片
        imgBox.css("left", -bannerWidth);
        //设置动画效果
        var index = 1;
        var imgAnimation = function() {
            //调用zepto中的一个动画函数
            imgBox.animate(
                //第一个对象,需要传入css动画的值
                {
                    "left": -index * bannerWidth
                },
                //完成动画所需要的时间
                200,
                //动画完成贝斯曲线
                "ease-in-out",
                //完成动画时的回调函数
                function() {
                    //判断图片是不是到了最后一张
                    if (index == count - 1) {
                        //如果是最后一张则让索引等于1,瞬间偏移到索引为1的位置
                        index = 1;
                        imgBox.css("left", -index * bannerWidth);
                    } else if (index == 0) {
                        // 判断是不是第一张,
                        index = count - 2;
                        imgBox.css("left", -index * bannerWidth);
                    }
                    //为点标记设置样式
                    indatior.removeClass("active").eq(index - 1).addClass("active");
                }
            );
        };
        //添加定时器
        var timeId = setInterval(function() {
            index++;
            imgAnimation();
        }, 2000);
        //添加左滑事件
        //在谷歌浏览器中无法启用swipe事件
        imgBox.on("swipeLeft", function() {
            //左滑index应该++
            index++;
            //此处应该清除定时器,重开动画效果
            clearInterval(timeId);
            imgAnimation();
        });
        //添加右滑效果
        imgBox.on("swipeRight", function() {
            index--;
            clearInterval(timeId);
            imgAnimation();
        });
    });
</script>

</html>